<template>
    <div class="message-warp">
        <headers :title="'查看留言'"/>
        <div class="group">
            <div class="cell-box  flex" v-for="(item,index) in messageList">
                <div class="news-box flex">
                    <img :src="item.avrtar" alt="" class="left">
                    <div class="center">
                        <div class="name-box">{{item.name}}</div>
                        <div class="section-line">
                            {{item.content}}
                        </div>
                        <div class="section-line supplement">
                            <span>{{item.date}}</span>
                        </div>
                    </div>
                    <img :src="item.img" alt="" class="right">
                </div>
            </div>
        </div>
        <!-- <div class="bom-tip">请不要相信任何人发送的二维码链接,请勿私下交易谨防被骗</div> -->
    </div>
</template>

<script>
    import headers from '../components/header.vue'
    import {Cell,Group,CellBox,Card,Tab,TabItem} from "vux";

    export default {
        data() {
            return {
                messageList: [
                    {
                        id: 1, name: '买家12',
                        content: '资讯资讯资讯内容内容资讯资讯资讯内容内容',
                        date:'2017.12.26',
                        avrtar: require('../assets/images/2-avatar.jpg'),
                        img: require('../assets/images/2.jpg')
                    },
                    {
                        id: 2, name: '买家123',
                        content: '资讯资讯资讯内容内容资讯资讯资讯内容内容',
                        date:'2017.12.26',
                        avrtar: require('../assets/images/2-avatar.jpg'),
                        img: require('../assets/images/2.jpg')
                    },
                    {
                        id: 3, name: '买家1234',
                        content: '资讯资讯资讯内容内容资讯资讯资讯内容内容',
                        date:'2017.12.26',
                        avrtar: require('../assets/images/2-avatar.jpg'),
                        img: require('../assets/images/2.jpg')
                    },
                ]
            }
        },
        components: {
            TabItem,
            Cell,
            Group,
            CellBox,
            Tab,
            headers
        },
        methods: {
            getBarWidth: function(index) {
                index = index || 0;
                let text = this.tabItem[index].name;
                // debugger
                return text.length * 16 / 37.5  + "rem";
            },
            getlist(){

            }
        }
    }
</script>

<style lang="less" scoped>
    .message-warp{
        height: 100%;
        box-sizing: border-box;
        // padding-top: 20rem/75;
        background: rgb(242,243,247);
    }
    .cell-box:nth-child(1){
        background: #eee;
    }
    .news-box {
        width: 100%;
        background: #fff;
        height: 180rem/75;
        border-bottom: 1rem/37.5 solid #dbdbdb;
        .left {
            width: 78rem/75;
            height: 78rem/75;
            border-radius: 50%;
            margin-left: 22rem/75;
            margin-top: 36rem/75;
        }
        .center {
            width: 462rem/75;
            margin-left: 22rem/75;
            margin-top: 34rem/75;
            margin-left: 18rem/75;
            margin-right: 20rem/75;
            .name-box {
                font-size: 13rem/37.5;
                color: #444444;
                font-weight: 600;
            }
            .section-line {
                font-size: 12rem/37.5;
                color: #999999;
                margin-top: 3rem/37.5;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .supplement{
                display: flex;
                justify-content: space-between;
                margin-top: 12rem/37.5;
                padding-bottom: 6rem/37.5;
            }
        }
        .right{
            margin-top: 34rem/75;
            width: 110rem/75;
            height: 110rem/75;
            border-radius: 6px;
            .redTip{
                background: #ff4444;
                width: 76rem/75;
                height: 36rem/75;
                line-height: 36rem/75;
                border-radius: 36rem/75;
                text-align: center;
                color: #fff;
            }
        }
    }
    .cell-box:last-child .news-box{
        border-bottom: none;
    }
    .first-cell-box .news-box{
        .right{
            margin-top: 72rem/75;
        }
    }
    .bom-tip{
        padding-top: 44rem/75;
        text-align: center;
        color: #999;
        font-size: 20rem/75;
    }
</style>

